@import "~scss/variables";
@import "~scss/mixins";

.sw-extension-card-base {
    &.is--deactivated {
        background: $color-gray-100;
        box-shadow: none;
        border: 1px solid $color-gray-300;

        .sw-extension-card-base__extension-activation-switch {
            background: $color-gray-50;
        }

        .sw-loader {
            background-color: rgba($color-gray-100, 0.8);
        }
    }

    &.deactivate-prevented {
        .mt-switch .mt-switch__switch {
            background: $color-shopware-brand-500;
            opacity: 0.5;

            &::after {
                background: $color-white;
            }
        }
    }

    &.is--not-installed {
        background-color: $color-gray-50;
        box-shadow: none;
        border: 1px solid $color-gray-300;
    }

    .sw-loader {
        border-radius: 8px;
    }

    .sw-extension-card-base__switch {
        .mt-switch {
            margin: 0;
            min-height: auto;

            label {
                display: none;
            }
        }
    }

    .sw-meteor-card__content .sw-meteor-card__content-wrapper {
        display: grid;
        grid-column-gap: 24px;
        grid-template-columns: 24px 56px 5fr 2fr minmax(min-content, 1fr) auto;
        align-items: center;
        padding: 16px 32px;
        border: none;
    }

    .sw-extension-card-base__info {
        margin-left: -8px;
        overflow: hidden;
        font-size: $font-size-xxs;

        .sw-extension-card-base__info-name {
            @include truncate;

            font-size: $font-size-xs;
            color: $color-darkgray-200;
            font-weight: $font-weight-semi-bold;
        }

        .sw-extension-card-base__info-inactive {
            font-size: $font-size-xs;
        }
    }

    .sw-extension-card-base__main-action {
        white-space: nowrap;
        text-align: center;
    }

    .sw-extension-card-base__meta-info {
        font-size: $font-size-xxs;
        text-align: right;

        a {
            color: $color-shopware-brand-500;
            margin-left: 4px;
        }

        &-version {
            font-weight: $font-weight-semi-bold;
        }
    }

    .sw-extension-card-base__open-extension {
        cursor: pointer;
        text-decoration: underline;
        color: $color-shopware-brand-500;
        transition: color 0.1s ease;
        font-weight: $font-weight-medium;

        &:hover {
            color: $color-shopware-brand-800;
        }
    }
}

.sw-extension-card-base__context-menu-privacy-link {
    display: flex;
    align-items: center;

    .mt-icon {
        margin-left: 4px;
    }
}
